<template>
  <div>
    <!-- 申请详情弹窗 -->
    <el-dialog title="申请详情" :visible.sync="showApplyDetail" width="40%" center @close="showApplyDetail = false">
      <div class="user-info-box v-align-c">
        <img class="width-60 height-60" :src="roleAuthorityInfo.avatar" alt="">
        <span class="font-18 mar-l-10">昵称: {{roleAuthorityInfo.nickname}}</span>
        <span class="font-18 mar-l-20">手机号: {{roleAuthorityInfo.phone}}</span>
      </div>
      <div class="flex mar-t-10 mar-b-20" v-if="roleAuthorityInfo.memberStore != undefined">
        <div class="flex-item pad-r-20" style="border-right: 1px solid #f5f5f5">
          <div class="flex">
            <span>店铺名称:</span>
            <span class="mar-l-10">{{roleAuthorityInfo.memberStore.storeName}}</span>
          </div>
          <div class="flex mar-t-10">
            <span>门店地址:</span>
            <span class="mar-l-10">{{roleAuthorityInfo.memberStore.storeAddress}}</span>
          </div>
          <div class="flex mar-t-10">
            <span>门店照片:</span>
            <div class="flex mar-l-10 flex-col flex-item">
              <el-image
                v-if="roleAuthorityInfo.memberStore.imageList != undefined && roleAuthorityInfo.memberStore.imageList.length > 0"
                class="width-per-100 height-260 width-260" :src="roleAuthorityInfo.memberStore.imageList[0]"
                :preview-src-list="roleAuthorityInfo.memberStore.imageList">
              </el-image>
            </div>
          </div>
          <div class="flex mar-t-10">
            <span>联系人:</span>
            <span class="mar-l-10">{{roleAuthorityInfo.memberStore.storeContact}}</span>
          </div>
          <div class="flex mar-t-10">
            <span>联系电话:</span>
            <span class="mar-l-10">{{roleAuthorityInfo.memberStore.storePhone}}</span>
          </div>
        </div>
        <div class="flex-col flex-item pad-l-20">
          <div class="flex">
            <span class="width-80 text-r">申请身份:</span>
            <span class="mar-l-10">{{roleAuthorityInfo.identityType === 1 ? '个人':'企业'}}</span>
          </div>
          <div class="flex mar-t-10">
            <span class="width-80 text-r">{{roleAuthorityInfo.identityType === 1 ? '真实姓名':'公司名称'}}:</span>
            <span class="mar-l-10">{{roleAuthorityInfo.identityName}}</span>
          </div>
          <div>
            <div class="flex mar-t-10">
              <span class="width-80 text-r">{{roleAuthorityInfo.identityType === 1 ? '身份证号':'社会信用证明'}}:</span>
              <span class="mar-l-10">{{roleAuthorityInfo.identityNumberCode}}</span>
            </div>
          </div>
          <div class="flex mar-t-10" v-if="roleAuthorityInfo.identityType === 1">
            <span class="width-80 text-r">身份证照片:</span>
            <div class="flex-col mar-l-10">
              <div class="flex-col">
                <el-image v-if="identityCardFrontImgList != undefined && identityCardFrontImgList.length > 0"
                  class="width-per-100 height-120 width-120" :src="identityCardFrontImgList[0]"
                  :preview-src-list="identityCardFrontImgList">
                </el-image>
              </div>
              <div class="flex-col mar-t-10">
                <el-image v-if="identityCardReverseImgList != undefined && identityCardReverseImgList.length > 0"
                  class="width-per-100 height-120 width-120" :src="identityCardReverseImgList[0]"
                  :preview-src-list="identityCardReverseImgList">
                </el-image>
              </div>
            </div>
          </div>
          <div v-if="roleAuthorityInfo.identityType === 2">
            <div class="flex mar-t-10">
              <span class="width-80 text-r">营业执照:</span>
              <div class="flex-col mar-l-10">
                <el-image v-if="businesslicenseImgList != undefined && businesslicenseImgList.length > 0"
                  class="width-per-100 height-120 width-120" :src="businesslicenseImgList[0]"
                  :preview-src-list="businesslicenseImgList">
                </el-image>
              </div>
            </div>
            <div class="flex mar-t-10">
              <span class="width-80 text-r">开户信息:</span>
              <div class="flex-col mar-l-10">
                <el-image
                  v-if="accountOpeningInformationImgList != undefined && accountOpeningInformationImgList.length > 0"
                  class="width-per-100 height-120 width-120" :src="accountOpeningInformationImgList[0]"
                  :preview-src-list="accountOpeningInformationImgList">
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-btn-group flex-center">
        <el-button type="primary" v-if="roleAuthorityInfo.applyStatus === 0" @click="doUpdateAuthorityStatus(1)">通过</el-button>
        <el-button v-if="roleAuthorityInfo.applyStatus === 0" @click="doUpdateAuthorityStatus(2)">拒绝</el-button>
        <el-button @click="showApplyDetail = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import wxIcon from '@/assets/images/bind-logo-1.png'
  export default {
    data() {
      return {
        wxIcon,
        showApplyDetail: false,
        roleAuthorityInfo: {},
        relationPlatformInfo: {},
        identityCardFrontImgList: [],
        identityCardReverseImgList: [],
        businesslicenseImgList: [],
        accountOpeningInformationImgList: []
      }
    },
    methods: {
      open() {
        this.showApplyDetail = true
      },
      setData(roleAuthorityInfo) {
        this.roleAuthorityInfo = roleAuthorityInfo
        // 1-截图证明 2-身份证正面照 3-身份证反面照 4、营业执照 5、开户信息
        if (this.roleAuthorityInfo !== undefined && this.roleAuthorityInfo.imageList !== undefined) {
          if (this.roleAuthorityInfo.identityType === 1) {
            this.identityCardFrontImgList = this.roleAuthorityInfo.imageList.filter(item => item.imageType === 2)
              .map(item => item.imageUrl)
            this.identityCardReverseImgList = this.roleAuthorityInfo.imageList.filter(item => item.imageType === 3)
              .map(item => item.imageUrl)
          }
          if (this.roleAuthorityInfo.identityType === 2) {
            this.businesslicenseImgList = this.roleAuthorityInfo.imageList.filter(item => item.imageType === 4).map(
              item => item.imageUrl)
            this.accountOpeningInformationImgList = this.roleAuthorityInfo.imageList.filter(item => item
              .imageType ===
              5).map(item => item.imageUrl)
          }
        }
      },
      doUpdateAuthorityStatus(authorityStatus) {
        this.$parent.doUpdateStatus(this.relationPlatformInfo, authorityStatus)
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-info-box {
    img {
      border-radius: 50%;
    }
  }
</style>
